<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>爱车出租</title>
		 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta content="yes" name="apple-touch-fullscreen">
         <meta name="apple-mobile-web-app-status-bar-style" content="black">  
         <script src="js/add_js.js"></script>
	</head>
	<body>
		<div class="ball-pulse"><div></div><div></div><div></div></div>
		<!--nav-->
        <nav class="bar bar-tab">
             <a class="tab-item external active" href="home.html">我的</a>
             <a class="tab-item external" href="order.html">定单</a>
             <a class="tab-item external" href="carRental.html">出租</a>
             <a class="tab-item external" href="rentalCar.html">租车</a>
             <div class="clear"></div>
        </nav>
    <!--nav-->
		<div class="page content">
					<div class="carRental-main">
					    <div class="carRental-list">
						    <ul>
							    <li>
								    <input type="text" placeholder="选择租车时间" id="rang-time" /> <span class="carRental-list-icon"><img src="img/icon/rl.png" name="img/icon/rl_f.png" ></span><div class="clear"></div>
							        <input type="hidden" placeholder="选择开始时间" id="rang-time-start" />
							        <input type="hidden" placeholder="选择结束时间" id="rang-time-end" />
							    </li>
							    <li>
								    <select id="select-airport" >
								    	    <optgroup label="">
                                              <option value='' disabled selected>请选择机场</option>
                                            </optgroup>
                                            <optgroup label="上海">
                                              <option value="Alan">虹桥国际机场</option>
                                              <option value="Anderson">浦东国际机场</option>
                                            </optgroup>
                                            <optgroup label="广州">
                                              <option value="Eva">广州白云机场</option>
                                            </optgroup>
                                            <optgroup label="太原">
                                              <option value="Michael">太原武旭机场</option>
                                             </optgroup>
                                    </select> 
                                      <span class="carRental-list-icon"><img src="img/icon/dd.png"></span><div class="clear"></div>
							    </li>
							    <li>
							    	<input type="text" placeholder="选择品牌/车型" id="for-select-car"  />
								    <select style="display: none;" id="select-car" multiple>
                                          <!---->   
                                    </select> 
								    <span class="carRental-list-icon"><img class="car" src="img/icon/qc.png"></span><div class="clear"></div>
							    </li>
							    <!--车辆列表-->
							    <div class="my-car-list" style="display: none;">
							      <ul>
							      	<li>
							      		<span></span>
							      		<div><img src="img/car.jpg"><br><a name="520d">BMW 520D</a></div>
							      		<div class="clear" style="float: none;"></div>
							      	</li>
							      	<li>
							      		<span></span>
							      		<div><img src="img/car.jpg"><br><a name="L400">BMW L400</a></div>
							      		<div class="clear" style="float: none;" ></div>
							      	</li>
							      	<li class="my-car-list-but" style="height: 40px; border-bottom: solid thin #5926BF;">确认</li>
							      </ul>
							    	
							    </div>
							    <!--车辆列表-->
							    <li>
								     <select id="select-gas">
                                              <option value="" disabled selected>请选择油费计算方式</option>
                                              <option value="Alan">原油位还车</option>
                                              <option value="Anderson">满由还车</option>                                        
                                    </select> 
								    <span class="carRental-list-icon"><img src="img/icon/qy.png"></span><div class="clear"></div>
							    </li>
						    </ul>
						    <div style="color:#2E6BE6">
						    	选择价格范围<label class="label-switch" style="float: right;padding-top: 5px;"></label><br>
						       <span style="color: #CAC3D9 ; font-size: 12px;display: inline-block; margin-top: 10px; width: 100%;">
						    	
						    	<div style="display:none" mbsc-enhance>
                                  <label style="background-color: #fff; padding: 0;margin-top: 20px;">
                                    <input type="range" value="100" min="0" max="500" step="100" data-tooltip="true" data-step-labels="[0, 100, 200, 300, 400, 500]">
                                    <input type="range" value="400" min="0" max="500" step="100" />
                                  </label>   
                                </div>
						    	
						       </span>
						    </div>
						    <div style="text-align: center;margin: 40px 0 40px 0;"><img src="img/icon/more.png" width="12" ><span style=" font-size: 12px;padding-left: 10px;display: inline-block;color: #F1A920;">可能需要</span></div>
						    <!--<div style="color:#2E6BE6;color: #2E6BE6;margin: 30px auto 30px auto;">
						    	 免费接送机服务<label class="label-switch" style="float: right;padding-top: 5px;"><input type="checkbox" checked="checked" > <div class="checkbox"></div></label>
						    	 <div class="carRental-list-jsj"><span><input type="text" placeholder="出发航班号(选填)"></span><span><input style="float: right;" type="text" placeholder="返回航班号(选填)"></span><div class="clear"></div></div>
						    </div>-->
						    <div style="color:#2E6BE6">
						    	自动下单<label class="label-switch" style="float: right;padding-top: 5px;"><input type="checkbox"  > <div class="checkbox"></div></label><br>
						    <span style="color: #CAC3D9 ; font-size: 12px;display: inline-block; margin-top: 10px;">开启后您无需手动跟进车时预订情况。并在第一时间由系统自动匹配完成车时预订。</span>
						    </div>
						     <!--<div style="color:#2E6BE6;    margin-top: 20px;">
						    	其他免费服务 <label id="show-morefree" class="label-switch" style="float: right;"><img src="img/icon/icon_down.png" width="24px" /></label>
						     </div>
						     <div class="carRental-list-morefree">
						    	<ul>
						    			<li>车内外清洁</li>
						    			<li>车胎补气</li>
						    			<li>整车安全检测</li>
						    			<li>随车物品保管</li>
						    	</ul>    
						     </div>-->
						    <div><textarea rows="2" placeholder="添加留言(选填)"></textarea></div>
						    <div><a id="carRental-submit" class=" bottn">提交</a></div>
					    </div>
					</div>
					<script>
					$(function () {
						my.scollToggleBar()
					     $('.ball-pulse').fadeOut()
						//获取key
						// my.checkLogin()
      				  //   key=my.get_key(sessionStorage.token);
      				      my.checkLogin()
      	    	          key=my.get_key(my.getCookie('token'))
						//选择时间
	                   var now=new Date();
                       $('#rang-time').mobiscroll().range({	
                       theme: 'mobiscroll',	
                       display: 'top',
                       lang:'zh',
                       showLabel:true,
                       //maxWidth: '100',//修改wheel尺寸
                       controls:  ['datetime'],
                       startInput: '#rang-time-start',
                       endInput: '#rang-time-end',
                       //endInput: $('#rang-time-end'),//结束时间
                       minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours()),
                       dateFormat: 'M-d日',
                       timeFormat: 'HH:ii',
                       timeWheels: 'Hii', 
		               timeText:'选择时间',
		               dateOrder: 'M d D',
		               //setText: '确定', //确认按钮名称
                       //cancelText: '取消',//取消按钮名籍我
		               monthText: '月',
		               dayText: '日',
	                   //yearText:'年',
		               hourText:'时',
		               minuteText:'分',
		               stepMinute: 10,
		               monthNamesShort:"1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月".split(","),
		               dayNamesShort: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
		               fromText:'开始时间',
		               toText:'结束时间', 
                          });
                        $('#rang-time').change(function(){
                        	var start_time=$('#rang-time-start').val();
                        	var end_time=$('#rang-time-end').val();
                        	var rang_time=start_time+"-"+end_time;
                        	$(this).val(rang_time).next('span').children('img').attr('src','img/icon/ok.png')
                        })
                        //选择机场
                        $("#select-airport").mobiscroll().select({ 
                          lang: 'zh',
                          display: 'bottom',
                          group: true,
                          animate: 'fade',
                        });
                        //选择汽车
//                       $("#select-car").mobiscroll().select({ 
//                        lang: 'zh',
//                        display: 'bottom',
//                        animate: 'fade'
//                      });
                        //选择油费结算方式
                         $("#select-gas").mobiscroll().select({ 
                          lang: 'zh',
                          display: 'bottom',
                          animate: 'fade',
                          rows:'3'
                          //invalid:
                        });
                        //提交点击效果
                        $('#carRental-submit').click(function(){
      				     $(this).css({'color':'#fff','backgroundColor':'#5926BF'})
      			        })
                        //显示更多服务
                        $('#show-morefree').click(function(){
      				    $('.carRental-list-morefree').slideToggle()
      				     if($(this).find('img').attr('src')=='img/icon/icon_down.png'){
      				     	$(this).find('img').attr('src','img/icon/icon_up.png')
      				     }else{
      				     	$(this).find('img').attr('src','img/icon/icon_down.png')
      				     }
      			        })
                        //自动输入完成效果
                        $('select').change(function(){
                        	if($(this).val()==''){
                        		$.toast($(this).find('option').eq(0).text())
                        	}else{
                        	   $(this).next('span').children('img').attr('src','img/icon/ok.png')
                        	}
                        })
                        $('#for-select-car').click(function(){
                        	$('.my-car-list').show()
                        })
                        $('#for-select-car').change(function(){
                        	console.log($(this).val())
                        	if($(this).val()==''){
                        		$.alert('请选择汽车')
                        	}else{
                        		
                        	   $(this).next('span').children('img').attr('src','img/icon/ok.png')
                        	}
                        })
                        //选择汽车
                        $('.my-car-list li').click(function(){
                        	$(this).find('span').toggleClass('add_color');
                        	if($(this).find('span').hasClass('add_color')){
                        		
                        	}
                        })
                        $('.my-car-list-but').click(function(){
                        	$('.my-car-list').hide()
                        	var input_now='';
                        	$('#select-car').empty();
                        	var car_length=$('.my-car-list li').length;
                        	for(var i=0;i<car_length;i++){
                        		if($('.my-car-list li').eq(i).find('span').hasClass('add_color')){
                        		 var car=$('.my-car-list li').eq(i).find('a').text()
                        	     var car_val=$('.my-car-list li').eq(i).find('a').attr('name')
                        	     var opt= "<option value="+car_val+" selected>"+car+"</option>"
                        	     $('#select-car').append(opt)
                        	     input_now=input_now+','+car
                        		}
                        	}
                        	$('#for-select-car').val(input_now)
                        	if($('#for-select-car').val()==''){
                        		$.toast('请选择汽车')
                        	}else{
                        		$('.car').attr('src','img/icon/ok.png')
                        	}
                        	
                        	
                        	
                        })
                     });
					</script>
		</div>
	</body>
</html>
